<template>
  <div class="container">
    <a-card class="general-card" :title="$route.meta.locale">
      <table-search
        v-permission="'system:notice:query'"
        :fileds="searchFileds"
        @search="search"
        @reset="search"
      ></table-search>
      <xTable
        v-model:refresh="refresh"
        v-model:selected-keys="selectedKeys"
        :params="params"
        :columns="tableColumns"
        :http="{
          list: getListData,
          del: delNotice,
          batchDel: delNotice,
        }"
        :http-permission="{
          del: 'system:notice:remove',
        }"
        row-key="noticeId"
      >
        <template #operation-default>
          <div class="item">
            <a-button
              v-permission="'system:notice:add'"
              type="outline"
              @click="editOpen(null)"
            >
              新增
            </a-button>
          </div>
          <div v-permission="'system:notice:edit'" class="item">
            <a-button
              type="outline"
              status="success"
              @click="editOpen(selectedKeys)"
            >
              编辑
            </a-button>
          </div>
        </template>
        <template #noticeType="{ row }">
          <dict-tag :options="dict.sys_notice_type" :value="row.noticeType" />
        </template>
        <template #status="{ row }">
          <dict-tag :options="dict.sys_notice_status" :value="row.status" />
        </template>
        <template #optional="{ row }">
          <a-button
            v-permission="'system:notice:edit'"
            type="text"
            status="success"
            @click="editOpen(row.noticeId)"
          >
            编辑
          </a-button>
        </template>
      </xTable>
    </a-card>
    <EditModal
      ref="edit"
      :fields="editFields"
      :http-add="addNotice"
      :http-edit="updateNotice"
      :http-get="getNotice"
      @reload="refresh = true"
    >
    </EditModal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { addDateRange } from '@/utils/index';
  import {
    getListData,
    delNotice,
    addNotice,
    updateNotice,
    getNotice,
  } from '@/api/system/notice';
  import { getDict } from '@/utils/dict';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import { Message } from '@arco-design/web-vue';

  const dict = getDict('sys_notice_type', 'sys_notice_status');

  //
  // edit.show();
  // 定义查询字段
  const searchFileds: Array<any> = reactive([
    {
      span: 5,
      field: 'noticeTitle',
      placeholder: '请输入公告标题',
      label: '公告标题',
      tag: 'a-input',
      initValue: '',
    },
    {
      span: 5,
      field: 'createBy',
      placeholder: '请输入操作人员',
      label: '操作人员',
      tag: 'a-input',
      initValue: '',
    },
    {
      span: 5,
      field: 'businessType',
      placeholder: '请选择公告类型',
      label: '公告类型',
      initValue: '',
      tag: 'a-select',
      attrs: {
        options: dict.sys_notice_type,
      },
    },
  ]);
  const editFields: Array<any> = reactive([
    {
      key: 'noticeTitle',
      label: '公告标题',
      placeholder: '请输入公告标题',
      tag: 'a-input',
      decorator: {
        rules: [{ required: true, message: '请输入公告标题', type: 'string' }],
      },
    },
    {
      key: 'noticeType',
      label: '公告类型',
      placeholder: '请输选择公告类型',
      tag: 'a-select',
      decorator: {
        rules: [{ required: true, message: '请输选择公告类型' }],
      },
      attrs: {
        options: dict.sys_notice_type,
      },
    },
    {
      key: 'status',
      label: '状态',
      placeholder: '请输选择状态',
      tag: 'a-radio-group',
      decorator: {
        rules: [{ required: true, message: '请输选择状态' }],
      },
      attrs: {
        options: dict.sys_notice_status,
      },
    },
    {
      key: 'noticeContent',
      label: '内容',
      tag: 'Editor',
      decorator: {
        rules: [{ required: true, message: '请输入公告内容' }],
      },
    },
  ]);
  const selectedKeys = ref([]);
  // 定义组件
  const edit = ref();
  // 定义表格字段
  const tableColumns: Array<TableColumnData> = reactive([
    {
      dataIndex: 'noticeId',
      title: '序号',
    },
    {
      dataIndex: 'noticeTitle',
      title: '公告标题',
    },
    {
      dataIndex: 'noticeType',
      title: '公告类型',
      slotName: 'noticeType',
    },
    {
      dataIndex: 'status',
      title: '状态',
      slotName: 'status',
    },
    {
      dataIndex: 'createBy',
      title: '创建者',
    },
    {
      dataIndex: 'createTime',
      title: '创建时间',
    },
    {
      dataIndex: 'optional',
      title: '操作',
      slotName: 'optional',
    },
  ]);
  const refresh = ref(true);
  // 定义表格查询参数
  const params = ref({
    dateRange: [],
  });
  // 定义搜索方法
  const search = (data: any) => {
    params.value = addDateRange(data, data?.dateRange);
    refresh.value = true;
  };
  const editOpen = (keys: any | any[]) => {
    if (Array.isArray(keys) && keys.length === 1) {
      edit.value.show(keys[0]);
    } else if (!Array.isArray(keys)) {
      edit.value.show(keys);
    } else if (Array.isArray(keys) && keys.length < 1) {
      Message.warning('必须选中一条数据');
    } else if (Array.isArray(keys) && keys.length > 1) {
      Message.warning('只能选中一条数据');
    }
  };
</script>

<style scoped lang="less">
  .operation-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
    .item {
      margin-left: 8px;
    }
  }
  .container {
    // padding: 0 20px 20px 20px;
  }
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
